fix: save grocery category immediately on select change

Picking a category only committed on blur, so the save fired after focus
left the select. Save on change instead, flush any pick made while a
previous submit is in flight, and only re-sync fields when navigating to
a different item so rapid re-picks aren't dropped or reverted by the
post-save reload.

1 files changed, 12 insertions, 2 deletions

diff --git a/src/routes/grocery/[id]/+page.svelte b/src/routes/grocery/[id]/+page.svelte
index 56e57fd..027c079 100644
--- a/src/routes/grocery/[id]/+page.svelte
+++ b/src/routes/grocery/[id]/+page.svelte
@@ -10,7 +10,12 @@
 	let isSubmitting = $state(false);
 	let formRef: HTMLFormElement;
 
+	// Only re-sync fields when navigating to a different item, so an edit made
+	// while a save is in flight isn't clobbered by the post-save reload.
+	let syncedId = -1;
 	$effect(() => {
+		if (data.item.id === syncedId) return;
+		syncedId = data.item.id;
 		name = data.item.name;
 		categoryId = data.item.categoryId ?? -1;
 	});
@@ -49,6 +54,8 @@
 			return async ({ update }) => {
 				await update({ reset: false });
 				isSubmitting = false;
+				// flush a change made while the previous submit was in flight
+				submitIfChanged();
 			};
 		}}
 	>
@@ -73,8 +80,11 @@
 			<select
 				class="form-select"
 				name="category_id"
-				bind:value={categoryId}
-				onblur={submitIfChanged}
+				value={categoryId}
+				onchange={(e) => {
+					categoryId = Number(e.currentTarget.value);
+					submitIfChanged();
+				}}
 			>
 				<option value={-1}>—</option>
 				{#each data.categories as cat (cat.id)}